import React from 'react';
import classNames from 'classnames';

/**
 * 按钮，预先处理了一些特定属性和onClick事件。
 * 用在文件选择器和文件列表中的一些图标按钮，如：删除、预览、下载、暂停、续传等。
 * 当然不一定只是图标按钮，文本按钮也试用，自定义children。
 * @param {any} props 
 */
export default function FileButton(props) {
    let {
        listType, // 列表类型，用于区分不同列表场景
        prefixCls = 'file-button',
        name,
        title,
        href,
        className,
        onClick,

        children
    } = props;

    if (!title) {
        title = name;
    }
    if (!href) {
        href = name;
    } else { // 如果指定了href，那么就不使用onClick回调
        onClick = undefined;
    }

    return (
        <a
            href={href}
            title={title}
            className={classNames([
                { [prefixCls]: prefixCls },
                { [`${prefixCls}--${listType}`]: prefixCls && listType },
                { [`${prefixCls}--${name}`]: prefixCls && name},
                className
            ])}
            onClick={e => {
                if (typeof onClick === 'function') {
                    e.preventDefault();
                    e.stopPropagation();

                    onClick(e);
                }
            }}
        >
            {children}
        </a>
    );
}